<template>
    <div class="app-container">
        <!-- <h2>欢迎进入玉丹颜后台</h2> -->
        <div class="ul">
            <div class="li">
                <div class="icon-bg">
                    <i class="el-icon-s-management"></i>
                </div>
                <div>
                    <p>{{ detail.today.total }} / {{ detail.today.sum }}</p>
                    <div>今日 订单数/交易额</div>
                </div>
            </div>
            <div class="li">
                <div class="icon-bg">
                    <i class="el-icon-s-finance"></i>
                </div>
                <div>
                    <p>{{ detail.month.total }} / {{ detail.month.sum }}</p>
                    <div>本月 订单数/交易额</div>
                </div>
            </div>
            <div class="li">
                <div class="icon-bg">
                    <i class="el-icon-s-order"></i>
                </div>
                <div>
                    <p>{{ detail.last_month.total }} / {{ detail.last_month.sum }}</p>
                    <div>上月 订单数/交易额</div>
                </div>
            </div>
            <div class="li">
                <div class="icon-bg">
                    <i class="el-icon-user-solid"></i>
                </div>
                <div>
                    <p>{{ detail.userCountDay }} / {{ detail.userCount }}</p>
                    <div>用户 新增/总用户</div>
                </div>
            </div>
        </div>
        <el-row :gutter="30" class="myrow">
            <el-col :span="6" class="painter admin-painter">
                <div class="admin-main">
                    <img src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/06/23/iShot2021-06-23-22.28.34.png" alt="" class="myuser-bg" />
                    <div class="avter-box">
                        <div class="tips-tit">
                            <h2>玉丹颜管理后台</h2>
                            <div class="tip">
                                <p>系统请求日志</p>
                                <i class="el-icon-odometer"></i>
                            </div>
                        </div>
                        <ul class="login-log">
                            <marquee direction="up" loop>
                                <li v-for="(item,index) in 20" :key="index">
                                    <el-tag type="success">/api/login/user</el-tag>
                                    <p>2020.01.22</p>
                                </li>
                            </marquee>
                        </ul>
                    </div>
                </div>
            </el-col>

            <el-col :span="6" class="painter">
                <div class="part-box">
                    <h2>系统环境</h2>
                    <ul class="device-main">
                        <li v-for="(item, index) in deviceInfo" class="item" :key="index">
                            <template v-if="item.label !== '浏览器信息'">
                                <div class="label">{{ item.label }}：</div>
                                <div class="val">
                                    <el-tag type="success">{{ item.val }}</el-tag>
                                </div>
                            </template>
                            <template v-else>
                                <div class="val">
                                    <p v-html="deviceInfo[deviceInfo.length - 1].val"></p>
                                </div>
                            </template>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="10" class="painter">
                <el-form ref="form" class="form" :model="form">
                    <el-form-item label="选择统计日期" style="margin-top: 10px">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <el-button type="primary" style="margin-left: 30px" icon="el-icon-search" @click="drawEcharts">查询</el-button>

                    </el-form-item>
                    <div>
                        <div id="main" style="width: 90%; height: 450px"></div>
                    </div>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import DeviceInfo from "@/utils/getDeviceInfo";
export default {
    data() {
        return {
            value1: [
                moment(new Date().setDate(1)).format("yyyy-MM-DD"),
                moment(Date.parse(new Date())).format("yyyy-MM-DD"),
            ],
            form: {},
            detail: {
                today: {},
                month: {},
                last_month: {},
                total: {},
            },
            deviceInfo: [],
        };
    },
    computed: {
        ...mapState("user", ["userInfo"]),
    },
    mounted() {
        // this.drawEcharts();
        DeviceInfo.getDeviceInfo(
            {
                info: [
                    "deviceType",
                    "OSVersion",
                    "OS",
                    "language",
                    "screenHeight",
                    "screenWidth",
                    "browserInfo",
                    "netWork",
                    "browserInfo",
                ],
            },
            (device) => {
                // console.log("🤬 ~ mounted ~ device", device);

                let {
                    deviceType,
                    OS,
                    OSVersion,
                    screenWidth,
                    screenHeight,
                    language,
                    netWork,
                    browserInfo,
                } = device;
                let deviceInfo = [
                    { label: "设备类型", val: deviceType },
                    { label: "操作系统", val: OS },
                    { label: "系统版本", val: OSVersion },
                    { label: "分辨率", val: screenWidth + "x" + screenHeight },
                    { label: "语言", val: language },
                    { label: "联网类型", val: netWork },
                    { label: "浏览器信息", val: browserInfo },
                ];
                this.deviceInfo = deviceInfo;
            }
        );
    },
    methods: {
        async drawEcharts() {
            var echarts = require("echarts");
            let res = await this.$Http.getHomeOrders({
                start_date: this.value1[0],
                end_date: this.value1[1],
            });
            if (res.status == 1) {
                this.detail = res.data || {};
                let xData = [];
                let xName = [];
                for (let i in this.detail.count) {
                    xData.push(this.detail.count[i].orders_number);
                    xName.push(this.detail.count[i].date);
                }
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                //基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById("main"));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: "订单统计表",
                        x: "right",
                        y: "top",
                    },
                    legend: {
                        data: ["订单量"],
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        data: xName,
                        name: "日期",
                    },
                    yAxis: {
                        type: "value",
                        name: "单位（单）",
                    },
                    series: [
                        {
                            name: "订单量",
                            data: xData,
                            type: "line",
                            itemStyle: {
                                color: "#409EFF", //改变折线点的颜色
                                lineStyle: {
                                    color: "#409EFF", //改变折线颜色
                                },
                            },
                        },
                    ],
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.app-container {
    // border: 10px solid #eee;
    min-height: calc(100vh - 80px);
    padding: 20px;
    background: #f0f2f5;
    .admin-painter {
        position: relative;
        .myuser-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            box-shadow: none;
            border-radius: 0;
        }
        .avter-box {
            position: relative;
            z-index: 10;
            margin-top: 200px;
            .tips-tit {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .tip {
                    display: flex;
                    align-items: center;
                    color: #999;
                    p {
                        margin-right: 10px;
                    }
                }
            }
            .login-log {
                margin: 0;
                padding: 0;
                list-style: none;
                marquee {
                    margin: 0;
                    padding: 0;
                    height: 210px;
                }
                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    p {
                        color: #ccc;
                    }
                }
            }
        }
    }
    .form {
        box-sizing: border-box;
        .el-form-item {
            padding-left: 10px;
        }
    }
    .line {
        height: 30px;
        background: #eee;
    }
    ::v-deep .myrow {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .painter {
        background: #fff;
        margin-top: 30px;
        padding-top: 30px;
        box-shadow: 4px 4px 40px rgb(0 0 0 / 10%);
        margin-right: 30px;
        border-radius: 8px;

        height: 550px;
    }
    .part-box {
        padding: 0 20px;
    }
    .device-main {
        margin: 0;
        padding: 0;
        li {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            line-height: 50px;
            .label {
                width: 100px;
                flex-shrink: 0;
            }
            .val {
                color: #409eff;
            }
        }
    }
    .ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .li {
            width: 24%;
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding-left: 40px;
            height: 100px;
            background: #fff;
            box-shadow: 4px 4px 40px rgb(0 0 0 / 10%);
            .icon-bg {
                padding: 5px;
                border-radius: 4px;
                i {
                    font-size: 40px;
                    color: #fff;
                }
            }

            > div {
                margin-left: 30px;
                p {
                    font-size: 24px;
                    margin: 0;
                    margin-bottom: 5px;
                    font-weight: bold;
                    padding: 0;
                }
                > div {
                    font-size: 14px;
                    opacity: 0.5;
                }
            }
        }
        .li:first-child {
            > div > p {
                color: #8bc34a;
            }
            .icon-bg {
                background-color: #8bc34a;
            }
        }
        .li:nth-child(2) {
            > div > p {
                color: #03a9f4;
            }

            .icon-bg {
                background-color: #03a9f4;
            }
        }
        .li:nth-child(3) {
            > div > p {
                color: #26a69a;
            }

            .icon-bg {
                background-color: #26a69a;
            }
        }
        .li:last-child {
            > div > p {
                color: #ab47bc;
            }

            .icon-bg {
                background-color: #ab47bc;
            }
        }
    }
}
</style>
